<template>
  <div class="container"> 
     <div class="school">广东佛山石门中学</div>
     <ul class="class">
       <li>101</li>
       <li>101</li>
       <li>101</li>
       <li>+</li>
     </ul>
     <div class="information">
       <div class="propaganda2">
            <div class="title">
            <span>基本信息:</span>
            <span>(必须先收集信息才可以开班级订单）</span>
            </div>
            <ul class="inputInformation clearfix">
            <li>
             <span>*班级</span>
             <input type="text"/>
            </li>
            <li>
             <span>*班级职务</span>
             <input type="text"/>
            </li>
            <li>
             <span>*姓名</span>
             <input type="text"/>
            </li>
            <li>
             <span>*联系方式</span>
             <input type="text"/>
            </li>
            </ul>
            <div class="propaganda">
              <div class="propagandaTitle">宣传阶段：</div>
              <div class="propagandaDetails">（依次完成宣传动作，可以提高成单率）</div>
              <ul class="checkboxGroup">
               <li>
                <checkbox-group>
                  <checkbox value="ds" checked="ds"/>已派送宣传资料以及通知定制优惠
                </checkbox-group>
               </li>
               <li>
                <checkbox-group>
                  <checkbox value="ds" checked="ds"/>已派送宣传资料以及通知定制优惠
                </checkbox-group>
               </li>
               <li>
                <checkbox-group>
                  <checkbox value="ds" checked="ds"/>已派送宣传资料以及通知定制优惠
                </checkbox-group>
               </li>
               <li>
                <checkbox-group>
                  <checkbox value="ds" checked="ds"/>已派送宣传资料以及通知定制优惠
                </checkbox-group>
               </li>
               <li>
                <checkbox-group>
                  <checkbox value="ds" checked="ds"/>已派送宣传资料以及通知定制优惠
                </checkbox-group>
               </li>
              </ul>
              <textarea></textarea>
              <div class="save">保存更新</div>
            </div>
       </div>




         <div class="propaganda propaganda1">
           <div class="propagandaTitle">用户反馈:</div>
           <div class="propagandaDetails">收集用户反馈以及买家秀，可以获得奖励</div>
           <textarea></textarea>
           <ul class="uploadImg clearfix">
             <li v-for="(value,index) in yhfkImg" :key="index">
                <img :src="value.imgSrc" class="upload" @click="add(value.addTag,'yhfkImg',value.imgSrc)"/>
                <img src="http://file.rzkeji.com/web/loveciy/img/error.png" v-show="value.addTag==1 ? false : true" class="error" @click="del('yhfkImg',value.imgSrc)"/>
             </li>
           </ul>
           <div class="save">保存更新</div>
         </div>

         <div class="propaganda propaganda1">
           <div class="propagandaTitle">售后问题:</div>
           <div class="propagandaDetails">如果有售后问题上传图片并对具体售后内容做情况说明</div>
           <textarea></textarea>
           <ul class="uploadImg clearfix">
             <li v-for="(value,index) in shwtImg" :key="index" >
                <img :src="value.imgSrc" class="upload" @click="add(value.addTag,'shwtImg',value.imgSrc)"/>
                <img src="http://file.rzkeji.com/web/loveciy/img/error.png" v-show="value.addTag==1 ? false : true" class="error" @click="del('shwtImg',value.imgSrc)"/>
             </li>
           </ul>
           <div class="save">保存更新</div>
         </div>
     </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      yhfkImg:[
       {
        imgSrc:"http://file.rzkeji.com/web/loveciy/img/join/upload.png",
        addTag:1,     //这里当addTag=1的时候是可以添加照片，如果不是的话就是查看照片
       },
      ],
      shwtImg:[
       {
        imgSrc:"http://file.rzkeji.com/web/loveciy/img/join/upload.png",
        addTag:1,
       },
      ]
    }
  },
  methods : {
    removeByValue(arr, val) {      //这个是用于删除指定数组的元素
      for(var i=0; i<arr.length; i++) {  
      if(arr[i].imgSrc == val) {  
      arr.splice(i, 1);  
      break;  
        }
      }  
    },
    del(type,imgSrc){
      var _this=this;
       if(type=='shwtImg')
       {
        _this.removeByValue(_this.shwtImg,imgSrc)
       }else{
        _this.removeByValue(_this.yhfkImg,imgSrc)
       }
    },
   add(addTag,type,imgSrc)
   {
    if(addTag==1)
    {
      //添加照片
      var _this=this;
      wx.chooseImage({   //选择上传照片
        count:9,
        sizeType:['original','compressed'],
        sourceType: ['album', 'camera'],
        success(res){
            res.tempFilePaths.forEach((item,i) => {
              if(type=='shwtImg')
              {
                _this.shwtImg.push({
                  imgSrc:res.tempFilePaths[i],
                  addTag:0
                })
              }else{
                _this.yhfkImg.push({
                  imgSrc:res.tempFilePaths[i],
                  addTag:0
                })
              }
            })
         }
       })
     }else{
        wx.previewImage({    //浏览照片
        current: imgSrc, // 当前显示图片的http链接
        urls: [imgSrc] // 需要预览的图片http链接列表
        })
     }
    }
  },
  computed:{

  }
}
</script>

<style scoped>
.container{width: 100%;}
.school{width: 100%;height: 30px;line-height: 30px;padding-top: 5px;padding-bottom: 5px;font-size: 16px;}
.class{width: 92%;height: 30px;padding-top: 10px;padding-bottom:10px;margin-left: 4%;background: #fff;border: 1px solid gray;border-radius: 5px;}
.class li{width:70px;height: 30px;line-height: 30px;text-align: center;float: left;border-radius: 5px;border:1px solid black;margin-left:10px; }
.information{width: 92%;margin-left: 4%;margin-top: 10px;border: 1px solid #d9d9d9}
.title{width: 100%;height: 30px;}
.title span:nth-of-type(1){color: gray;font-size: 20px;line-height: 30px;}
.title span:nth-of-type(2){color: red;font-size: 15px;line-height: 30px;}
.inputInformation{width: 98%;padding-left: 2%;padding-top: 10px;padding-bottom: 10px;}
.inputInformation li:nth-of-type(1),.inputInformation li:nth-of-type(3){width: 40%;}
.inputInformation li:nth-of-type(2),.inputInformation li:nth-of-type(4){width: 55%;margin-left: 10px;}
.inputInformation li{height: 30px;float: left;display: flex;justify-content: row;margin-bottom:15px;}
.inputInformation li:nth-of-type(1) span,.inputInformation li:nth-of-type(3) span{width: 50px;}
.inputInformation li:nth-of-type(2) span,.inputInformation li:nth-of-type(4) span{width: 94px;}
.inputInformation li:nth-of-type(1) input,.inputInformation li:nth-of-type(3) input{width: 80px;}
.inputInformation li:nth-of-type(2) input,.inputInformation li:nth-of-type(4) input{width: 130px;}
.inputInformation li span{height: 30px;margin-top: 5px;display: block;font-size: 16px;}
.inputInformation li input{height: 30px;border:1px solid black;border-radius: 5px;}

.propaganda{width: 97%;}
.propaganda1{border: 1px solid gray;border-radius: 5px;background: #fff;padding:5px;margin-top: 20px;}
.propaganda2{border: 1px solid gray;border-radius: 5px;background: #fff;padding:5px;}
.propagandaTitle{width: 94%;height: 30px;line-height: 30px;font-size: 16px;margin-left: 3%}
.propagandaDetails{width: 94%;height: 25px;line-height: 25px;font-size: 13px;color: red;margin-left: 3%}
ul.checkboxGroup{width: 100%;margin-top: 20px;}
ul.checkboxGroup li{width: 97%;height: 30px;margin-bottom: 15px;padding-left: 3%;line-height: 30px;font-size: 15px;}
textarea{width: 94%;height: 80px;border:1px solid black;margin-left: 3%;border-radius: 10px;margin-top: 10px;}
.uploadImg{margin-top: 10px;}
.uploadImg li{width: 70px;height: 70px;float: left;margin-left: 10px;margin-top: 5px;position: relative;}
.error{width: 20px;height: 20px;position: absolute;right: 0;top: 0;}
.upload{width: 70px;height: 70px;border-radius: 10px;}
.save{width: 100px;height: 40px;border-radius: 10px;text-align: center;line-height: 40px;margin:20px auto;font-size: 16px;border:1px solid gray;}
</style>
